#{extends 'Admin_main.html' /}
<div class="block span10" style="margin-left: 20px;">
    <a href="#tablewidget" class="block-heading" data-toggle="collapse">菜单管理</a>
    <div class="btn-toolbar" style="margin-left: 20px;">

        <a href="" class="btn btn-primary">导入</a>
        <a href="" class="btn btn-primary">导出</a>
        <a href="javascript:void(0);" data-toggle="modal" class="btn" onclick="del()">删除</a>
        <a href="#myModal2" data-toggle="modal" class="btn btn-primary">创建信息</a>
        <div class="btn-group">
        </div>
    </div>
    <div id="tablewidget" class="block-body collapse in">
        <table class="table table-bordered table-striped" id="selectTable">
            <tr>
                <th><input type="checkbox"></th>
                <th>编号信息</th>
                <th>模型信息</th>
                <th>模型宽度</th>
                <th>模型高度</th>
                <th>模型单位</th>
                <th>操作</th>
            </tr>
            <tbody>
            #{list list,as:'list'}
            <tr>
                <td><input type="checkbox" class="caozuo" value="${list.Id}"></td>
                <td>
                    #{if list.Id == null}
                        暂无数据
                    #{/if}
                    #{else }
                    ${list.Id}
                    #{/else}
                </td>

                <td>
                    #{if list.ImageNames == null}
                        暂无数据
                    #{/if}
                    #{else }
                    ${list.ImageNames}
                    #{/else}
                </td>
                <td>
                    #{if list.ImageWidth == null}
                        暂无数据
                    #{/if}
                    #{else }
                    ${list.ImageWidth}
                    #{/else}
                </td>
                <td>
                    #{if list.ImageHeght == null}
                        暂无数据
                    #{/if}
                    #{else }
                    ${list.ImageHeght}
                    #{/else}
                </td>
                <td>
                    #{if list.ImageCompany == null}
                        暂无数据
                    #{/if}
                    #{else }
                    ${list.ImageCompany}
                    #{/else}
                </td>
                <td>
                    <a href="#myModal1" data-toggle="modal" onclick="demo()" class="btn btn-primary">预览</a>
                    <a href="#myModal2" data-toggle="modal"  onclick="update(${list.Id})"  class="btn btn-primary">修改信息</a>

                </td>
            </tr>
            #{/list}
            </tbody>
        </table>
    </div>
</div>
<!--预览-->
<div class="modal small hide fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel1">正在发送</h3>
    </div>
    <div class="modal-body" id="bodys">
        <div id="image_body" style="border: 1px solid #eeeeee;"></div>
        <p class="msg" style="margin-top: 10px;">暂无信息</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
    </div>
</div>
<!--创建信息-->
<div class="modal small hide fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel14">创建信息</h3>
    </div>
    <div class="modal-body" id="bodys">
        <input type="text" placeholder="请输入模型信息" id="ImageNames">
        <input type="text" placeholder="请输入模型宽度" id="ImageWidth">
        <input type="text" placeholder="请输入模型高度" id="ImageHeght">
        <input type="text" placeholder="请输入模型单位" id="ImageCompany">
        <label class="createMsg"></label>
    </div>
    <div class="modal-footer">

        <a href="#myModal3" data-toggle="modal" class="btn btn-primary" id="updates" onclick="create()">创建信息</a>
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button>
    </div>
</div>
<div class="modal small hide fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel2">正在发送</h3>
    </div>
    <div class="modal-body" id="body1">

    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
    </div>
</div>
<!--删除信息-->
<div class="modal small hide fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="display: none;">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel3">正在发送</h3>
    </div>
    <div class="modal-body" id="body2">

    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
    </div>
</div>
<input type="hidden" id="Id">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    var json = [
    #{list list1,as:'list1'}
        {
            Id:'${list1.Id}',
            ImageNames:'${list1.ImageNames}',
            ImageWidth:'${list1.ImageWidth}',
            ImageHeght:'${list1.ImageHeght}',
            ImageCompany:'${list1.ImageCompany}'
        },
    #{/list}
    ];
    function demo(){

        var index =  $(".caozuo").length;
         for(var j =0;j<index;j++){
             var a =$(".caozuo")[j].value;
            if($(".caozuo")[j].checked){
                for(var i = 0;i<json.length;i++){

                    if(a==json[i].Id){
                        var bodys = document.getElementById("bodys");
                        bodys.style.width = (parseInt(json[i].ImageWidth)+100)+"px";
                        bodys.style.height =(parseInt(json[i].ImageHeght)+50)+"px";
                        var image_body = document.getElementById("image_body");
                        image_body.style.width = json[i].ImageWidth+"px";
                        image_body.style.height = json[i].ImageHeght+"px";
                       $(".msg").html("尺寸： "+ json[i].ImageHeght+"  乘  "+ json[i].ImageWidth+"  "+ json[i].ImageCompany);
                        $("#myModalLabel1").html(json[i].ImageNames);
                   }
                }
            }
         }

    }
    function create(){
        var Id = document.getElementById("Id").value;
       if ($.isEmptyObject(Id)){
           var ImageNames = document.getElementById("ImageNames").value;
           var ImageWidth = document.getElementById("ImageWidth").value;
           var ImageHeght = document.getElementById("ImageHeght").value;
           var ImageCompany = document.getElementById("ImageCompany").value;
           if ($.isEmptyObject(ImageNames)||$.isEmptyObject(ImageWidth)||$.isEmptyObject(ImageHeght)||$.isEmptyObject(ImageCompany)){
               $("#myModalLabel2").html("提交失败");
               $("#body1").html("提交信息不得为空！")
           }else{
               $.ajax({
                   type: "POST",
                   url: "/Design/Create.html",
                   data:{ImageNames:ImageNames,ImageWidth:ImageWidth,ImageHeght:ImageHeght,ImageCompany:ImageCompany},
                   dataType: "json",
                   success: function(data){
                       if(data.code == 1){
                           document.getElementById("myModalLabel2").innerHTML = "发送成功";
                           var content = " <p>创建成功，请刷新信息</p>";
                           document.getElementById("body1").innerHTML = content;
                       }else if(data.code == 0){
                           document.getElementById("myModalLabel2").innerHTML = "发送成功";
                           var content = " <p>创建失败，请检查信息</p>";
                           document.getElementById("body1").innerHTML = content;
                       }
                   }

               });
           }
       }else{
          updates();
       }
    }
    function del(){
        var index =  $(".caozuo").length;
        for(var j =0;j<index;j++){
            var a =$(".caozuo")[j].value;
            if($(".caozuo")[j].checked){

                for(var i = 0;i<json.length;i++){
                    if(a==json[i].Id){
                        $.ajax({
                            type: "POST",
                            url: "/Design/delete.html",
                            data:{id:json[i].Id},
                            dataType: "json",
                            success: function(data){
                                if(data.code == 1){
                                    document.getElementById("myModalLabel3").innerHTML = "发送成功";
                                    var content = " <p>删除成功，请刷新信息</p>";
                                    document.getElementById("body2").innerHTML = content;
                                }else if(data.code == 0){
                                    document.getElementById("myModalLabel3").innerHTML = "发送成功";
                                    var content = " <p>删除失败，请检查信息</p>";
                                    document.getElementById("body2").innerHTML = content;
                                }
                            }

                        });
                    }
                }
            }
        }
    }
    function update(Id){
        var ImageNames = document.getElementById("ImageNames").value;
        var ImageWidth = document.getElementById("ImageWidth").value;
        var ImageHeght = document.getElementById("ImageHeght").value;
        var ImageCompany = document.getElementById("ImageCompany").value;
        var index = json.length;
        for(var j =0;j<index;j++) {
           if(json[j].Id == Id){
               document.getElementById("myModalLabel14").innerHTML ="修改信息";
               document.getElementById("ImageNames").value = json[j].ImageNames;
               document.getElementById("ImageWidth").value=json[j].ImageWidth;
               document.getElementById("ImageHeght").value=json[j].ImageHeght;
               document.getElementById("ImageCompany").value=json[j].ImageCompany;
                 $("#Id").val(Id)  ;
               $("#updates").html("修改信息")  ;

           }
        }

    }
    function updates(){
        var Id = document.getElementById("Id").value;
        $.ajax({
            type: "POST",
            url: "/Design/update.html",
            data:{ImageNames:ImageNames,ImageWidth:ImageWidth,ImageHeght:ImageHeght,ImageCompany:ImageCompany,Id:Id},
            dataType: "json",
            success: function(data){
                if(data.code == 1){
                    document.getElementById("myModalLabel2").innerHTML = "发送成功";
                    var content = " <p>创建成功，请刷新信息</p>";
                    document.getElementById("body1").innerHTML = content;
                }else if(data.code == 0){
                    document.getElementById("myModalLabel2").innerHTML = "发送成功";
                    var content = " <p>创建失败，请检查信息</p>";
                    document.getElementById("body1").innerHTML = content;
                }
            }

        });
    }
</script>

